import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//引入base.css
import './base.css'

//需要提前导入组件
import Find from './views/Find.vue'
import My from './views/My.vue'
import Part from './views/Part.vue'
import NotFound from './views/NotFound.vue'

import Recommend from './views/second/Recommend.vue'
import Ranking from './views/second/Ranking.vue'
import SongList from './views/second/SongList.vue'

//1.下包
//2.引入 vue-router
import VueRouter from 'vue-router'

//3.使用 Vue.use() 方法给 vue 安装插件
//内部会帮我们注册两个全局组件 :RouterLink RouterView
Vue.use(VueRouter)

//4.创建路由规则数组
// import NotFound from '@views/NotFound'
const routes = [
  //一个对象就是一条规则
  //规则对象中两个核心属性:
  //path       路由
  //component  组件

  {
    path: '/', //默认hash值路径
    redirect: '/find' //重新定向到/find
    //浏览器url中#后的路径被改成/find 重新匹配数组规则
  },
  {
    path: '/find',
    component: Find,
    name: 'Find',
    children: [
      {
        //二级路由中 path 不用 / 开头
        path: 'ranking', //匹配路径时会自动拼接一级路由, /find/ranking
        component: Ranking
      },
      {
        path: 'recommend',
        component: Recommend
      },
      {
        path: 'songlist',
        component: SongList
      }
    ]
  },
  { path: '/my', component: My, name: 'My' },
  { path: '/part', component: Part, name: 'Part' },
  // { path: '/part/:name/:age', component: Part,name:'Part' },
  //path:'*' 表示匹配所有路径
  //路由匹配是从上到下逐条匹配的
  { path: '*', component: NotFound }
]

//5.创建路由对象，传入路由规则数组
const router = new VueRouter({
  // routes   属性是官方要求的属性名，不能随意更改
  routes,
  //模式：可选值 hash/history
  //默认是 hash
  //history 必须要服务器支持
  //
  mode: 'hash'
})

let isLogin = true
//路由权限控制:全局 前置 导航守卫
//router.beforeEach() 注册全局前置守卫，一旦注册，所有路由跳转都会经过它
//注意事项:只有注册了全局前置守卫，必须执行 next() 否则路由系统会瘫痪
//参数：to:到哪里去 ;from:从哪里来;next:函数，不传参执行表示放行,传入 false 执行表示阻止
router.beforeEach((to, from, next) => {
  if (!isLogin && to.path === '/my') {
    alert('亲，请登录!')
    //return next(false)  //阻止跳转
    return next('/part') //强行跳转至朋友页 /part
  }
  next()
})

new Vue({
  render: h => h(App),
  //6.将路由对象挂到 Vue 实例中
  router
}).$mount('#app')
